<template>
  <div class="TTable h-full min-h-0 flex-1">
    <el-table
      ref="TTable"
      height="100%"
      :stripe="isStripe"
      :class="className"
      :header-row-class-name="headerRowClassName"
      :data="source"
      tooltip-effect="dark"
      :row-key="rowKey"
      :tree-props="treeProps"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <el-table-column
        v-if="showCheckbox"
        type="selection"
        width="40"
        fixed="left"
        reserve-selection
        center
      ></el-table-column>
      <el-table-column v-if="showIndex" type="index" label="序号" fixed="left" width="60" :index="handleIndex" />
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :label="item.label"
        :type="item.type"
        :min-width="item.minWidth || item.width"
        :width="item.width"
        :fixed="item.fixed"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltipField"
        :class-name="item.isTree ? 'table-item-left' : ''"
      >
        <template slot-scope="scope">
          <slot
            v-if="item.key"
            :name="item.key"
            :record="scope.row"
            :index="scope.$index"
            :class="[item.showOverflowTooltipField ? `truncate w-[${item.width}px]` : '']"
          ></slot>
          <div v-else class="block" :class="[item.showOverflowTooltipField ? `truncate w-[${item.width}px]` : '']">
            {{ scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </div>
        </template>
      </el-table-column>
      <template slot="empty">
        <t-empty-data />
      </template>
    </el-table>
    <!-- <div v-if="pagination" class="relative -left-[16px] -top-[1px] z-50 h-[1px] w-[calc(100%+32px)] bg-[#e5e7eb]"></div> -->
  </div>
</template>

<script>
export default {
  name: "TTable",
  props: {
    source: {
      //数据源
      type: Array,
      required: true,
      default: () => [],
    },
    columns: {
      //列表项配置项
      type: Array,
      required: true,
      default: () => [],
    },
    showIndex: {
      //是否显示序列
      type: Boolean,
      required: false,
      default: false,
    },
    className: {
      //支持设置个性化样式
      type: String,
      required: false,
      default: "",
    },
    headerRowClassName: {
      //至此设置每列的个性化样式
      type: String,
      required: false,
      default: "",
    },
    isStripe: {
      type: Boolean,
      required: false,
      default: false,
    },
    rowKey: {
      type: String,
      require: false,
      default: "",
    },
    treeProps: {
      type: Object,
      require: false,
      default: () => {},
    },
    pagination: {
      type: Object,
      require: false,
      default: () => {},
    },
    showCheckbox: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["TTable"].doLayout();
    });
  },
  methods: {
    handleIndex(index) {
      if (this.pagination && this.pagination.page) {
        return (this.pagination.page - 1) * this.pagination.size + (index + 1);
      } else {
        return index + 1;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
